﻿<template>
  <div id = 'dynamic_container'>
    <!-- 左边展示可以拉选的组件列表 -->
    <div id = 'item_pannel'>
      <el-collapse accordion class = 'myCollapse'>
        <el-collapse-item title = '布局元素'>
          <draggable tag = 'ul' :list = 'layoutComponents' v-bind = "{group:{ name:'people', pull:'clone', put:false}, sort:false}">
            <li :class = "item.type === 'grid' ? 'data-grid': 'tabs-grid'" v-for = '(item) in layoutComponents' :key = 'item.key'>
              <i class = 'iconfont ' :class = 'item.icon'></i>
              <span>{{item.name}}</span>
            </li>
          </draggable>
        </el-collapse-item>
        <el-collapse-item title = '表单元素'>
          <draggable tag = 'ul' :list = 'formComponents' v-bind = "{group:{ name:'people', pull:'clone', put:false}, sort:false}">
            <li v-for = '(item, index) in formComponents' :key = 'index'>
              <i class = 'iconfont ' :class = 'item.icon'></i>
              <span>{{item.name}}</span>
            </li>
          </draggable>
        </el-collapse-item>
        <el-collapse-item title = '其它元素'>
          <draggable tag = 'ul' :list = 'otherComponents' v-bind = "{group:{ name:'people', pull:'clone', put:false}, sort:false}">
            <li v-for = '(item, index) in otherComponents' :key = 'index'>
              <i class = 'iconfont ' :class = 'item.icon'></i>
              <span>{{item.name}}</span>
            </li>
          </draggable>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 右侧展示的是配置的信息 -->
    <div id = 'detail_pannel' ref = 'detail_pannel'>
      <el-tabs v-model = 'currentTab' stretch>
        <el-tab-pane label = '组件/页面属性' name = 'currentPage'>
          <Form-Config :data = 'formData'></Form-Config>
        </el-tab-pane>
        <!-- 只有当动态表单需要配置流程时才会显示 -->
        <el-tab-pane label = '页面流程' name = 'currentWorkflow' v-if = "from === 'workflow'">
          <Workflow-Config :currentPage = 'formData.pageConfig' :showEditContentDialog = 'showEditContentDialog' from = 'dynamicPage'></Workflow-Config>
        </el-tab-pane>
        <el-tab-pane label = '页面事件' name = 'currentPageEventsConfig'>
          <Page-Events-Config :currentPageUid = 'currentPageUid' :currentPage = 'formData.pageConfig' :allSingleModel = 'allSingleModel' :showEditContentDialog = 'showEditContentDialog' :from = 'from'></Page-Events-Config>
        </el-tab-pane>
        <el-tab-pane label = '当前元素' name = 'currentFormItem'>
          <Form-Item-Config :formItemConfig = 'selectFormItem' :formDataList = 'allSingleModel'></Form-Item-Config>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 中间是主要的内容部分 -->
    <div id = 'main_pannel' ref = 'main_pannel'>
      <div class = 'main_buttonContent'>
        <el-button type = 'info' @click = 'resetForm' size = 'mini' icon = ''>取消</el-button>
        <el-button type = 'primary' @click = 'submitForm' size = 'mini'>确定</el-button>
        <el-button type = 'primary' @click = 'previewEdit' size = 'mini'>预览</el-button>
      </div>
      <Form-Layout :data="formData" :select.sync="selectFormItem"></Form-Layout>
    </div>
    <!-- 展示的弹窗 -->
    <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '95%' append-to-body>
      <Show-Form-Layout v-if = "dialogFormVisible  && from === 'dynamic'" :data = "formData"></Show-Form-Layout>
      <Show-Workflow-Form-Layout v-if = "dialogFormVisible && from === 'workflow'" :data = "formData"></Show-Workflow-Form-Layout>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
// 主体内容展示的区域
import FormLayout from './FormLayout.vue'
// 查看动态表单的页面
import ShowFormLayout from './ShowFormLayout.vue'
// 查看流程表单的页面
import ShowWorkflowFormLayout from './ShowWorkflowFormLayout.vue'
// 右侧单个字段的详细设置
import FormItemConfig from './FormItemConfig'
// 当前页面/组件的信息
import FormConfig from './FormConfig.vue'
// 页面事件配置
import PageEventsConfig from './PageEventsConfig.vue'
// 流程的配置信息
import WorkflowConfig from '../WorkflowConfig.vue'
import { formComponents, layoutComponents, otherComponents } from './componentsData.js'
export default {
  props: ['currentRow', 'showEditContentDialog', 'from'],
  data () {
    return {
      formComponents,
      layoutComponents,
      otherComponents,
      formData: {
        list: [],
        config: {
          labelWidth: 100,
          labelPosition: 'left',
          itemSize: 'medium',
          inline: false
        },
        pageConfig: {
          name: '',
          width: 50,
          // 页面事件
          events: [],
          // 页面事件字典表
          eventsDictionary: {},
          // 是否配置流程
          hadWorkflow: false,
          // 关联的流程WFID
          relatedWorkflow: '',
          relatedWorkflowName: '',
          // 关联的流程的节点
          relatedWorkflowNode: '',
          // 流程相关的事件
          workflowBtnEvents: [],
          // 流程相关的事件的词典表
          workflowBtnEventsDictionary: {},
          // 是否为流程发起界面
          launchWorkflow: false,
          relatedWorkflowCode: ''
        }
      },
      selectFormItem: null,
      dialogTitle: '页面设置效果预览',
      dialogFormVisible: false,
      // 当前选中的tab
      currentTab: 'currentPage',
      // 所有的单个元素
      allSingleModel: [],
      currentPageUid: ''
    }
  },
  created () {
    this.judgeDialogOpen()
  },
  methods: {
    // 获取所有的单个元素
    getAllSingleModel (itemList) {
      this.allSingleModel = []
      if (itemList.length) {
        itemList.forEach((item, index) => {
          if (item.type === 'grid') {
            if (item.columns.length) {
              for (let i = 0; i < item.columns.length; i++) {
                for (let n = 0; n < item.columns[i].list.length; n++) {
                  this.allSingleModel.push(item.columns[i].list[n])
                  if (item.columns[i].list[n].type === 'number') {
                    if (item.columns[i].list[n].options.min === null) {
                      this.$set(this.formData.list[index].columns[i].list[n].options, 'min', -Infinity)
                    }
                    if (item.columns[i].list[n].options.max === null) {
                      this.$set(this.formData.list[index].columns[i].list[n].options, 'max', Infinity)
                    }
                  }
                }
              }
            }
          } else if (item.type === 'tabs') {
            if (item.tabList.length) {
              for (let i = 0; i < item.tabList.length; i++) {
                for (let n = 0; n < item.tabList[i].list.length; n++) {
                  if (item.tabList[i].list[n].type === 'grid') {
                    const tabGrid = item.tabList[i].list[n]
                    if (tabGrid.columns.length) {
                      for (let it = 0; it < tabGrid.columns.length; it++) {
                        for (let nt = 0; nt < tabGrid.columns[it].list.length; nt++) {
                          this.allSingleModel.push(tabGrid.columns[it].list[nt])
                          if (tabGrid.columns[it].list[nt].type === 'number') {
                            if (tabGrid.columns[it].list[nt].options.min === null) {
                              this.$set(this.formData.list[index].tabList[i].list[n].columns[it].list[nt].options, 'min', -Infinity)
                            }
                            if (tabGrid.columns[it].list[nt].options.max === null) {
                              this.$set(this.formData.list[index].tabList[i].list[n].columns[it].list[nt].options, 'max', Infinity)
                            }
                          }
                        }
                      }
                    }
                  } else {
                    this.allSingleModel.push(item.tabList[i].list[n])
                    if (item.tabList[i].list[n].type === 'number') {
                      if (item.tabList[i].list[n].options.min === null) {
                        this.$set(this.formData.list[index].tabList[i].list[n].options, 'min', -Infinity)
                      }
                      if (item.tabList[i].list[n].options.max === null) {
                        this.$set(this.formData.list[index].tabList[i].list[n].options, 'max', Infinity)
                      }
                    }
                  }
                }
              }
            }
          } else {
            this.allSingleModel.push(item)
            if (item.type === 'number') {
              if (item.options.min === null) {
                this.$set(this.formData.list[index].options, 'min', -Infinity)
              }
              if (item.options.max === null) {
                this.$set(this.formData.list[index].options, 'max', Infinity)
              }
            }
          }
        })
      }
    },
    // 判断是否打开了编辑页面的弹窗
    judgeDialogOpen () {
      if (this.showEditContentDialog) {
        this.currentPageUid = this.currentRow.uid
        if (this.currentRow.settings) {
          this.formData = JSON.parse(this.currentRow.settings)
          // 由于workflowBtnEvents是后来配置的字段，如果没有该字段就添加上去
          if (Object.keys(this.formData.pageConfig).indexOf('workflowBtnEvents') === -1) {
            this.$set(this.formData.pageConfig, 'workflowBtnEvents', [])
          }
          if (Object.keys(this.formData.pageConfig).indexOf('eventsDictionary') === -1) {
            this.$set(this.formData.pageConfig, 'eventsDictionary', {})
          }
          if (Object.keys(this.formData.pageConfig).indexOf('workflowBtnEventsDictionary') === -1) {
            this.$set(this.formData.pageConfig, 'workflowBtnEventsDictionary', {})
          }
          if (Object.keys(this.formData.pageConfig).indexOf('relatedWorkflowName') === -1) {
            this.$set(this.formData.pageConfig, 'relatedWorkflowName', '')
          }
          this.formData.pageConfig.name = this.currentRow.name
          if (this.formData.list.length) {
            this.selectFormItem = this.formData.list[0]
          }
        } else {
          this.formData = {
            list: [],
            config: {
              labelWidth: 100,
              labelPosition: 'left',
              itemSize: 'medium',
              inline: false
            },
            pageConfig: {
              name: this.currentRow.name,
              width: 50,
              events: [],
              eventsDictionary: {},
              hadWorkflow: false,
              relatedWorkflow: '',
              relatedWorkflowName: '',
              relatedWorkflowNode: '',
              workflowBtnEvents: [],
              workflowBtnEventsDictionary: {},
              launchWorkflow: false,
              relatedWorkflowCode: ''
            }
          }
          this.selectFormItem = ''
        }
      }
    },
    // 取消
    resetForm () {
      this.$emit('resetForm')
    },
    // 确定
    submitForm () {
      if (this.from === 'workflow') {
        if (this.formData.pageConfig.launchWorkflow) {
          // 以流程发起界面为准，当有流程发起界面时，流程配置界面就为false
          this.formData.pageConfig.hadWorkflow = false
          this.formData.pageConfig.relatedWorkflow = ''
          this.formData.pageConfig.relatedWorkflowNode = ''
          this.formData.pageConfig.workflowBtnEvents = []
          if (!this.formData.pageConfig.relatedWorkflowCode) {
            this.$message({
              message: '当为流程发起界面时，必须选择流程code',
              type: 'warning'
            })
          } else {
            let obj = {
              category: this.formData.pageConfig.relatedWorkflowName,
              jsonData: JSON.stringify(this.formData)
            }
            this.$emit('submitForm', obj)
          }
        } else {
          this.formData.pageConfig.relatedWorkflowCode = ''
          if (!this.formData.pageConfig.hadWorkflow) {
            this.formData.pageConfig.relatedWorkflow = ''
            this.formData.pageConfig.relatedWorkflowName = ''
            this.formData.pageConfig.relatedWorkflowNode = ''
            this.formData.pageConfig.workflowBtnEvents = []
            let obj = {
              category: this.formData.pageConfig.relatedWorkflowName,
              jsonData: JSON.stringify(this.formData)
            }
            this.$emit('submitForm', obj)
          } else {
            if (!this.formData.pageConfig.relatedWorkflow || !this.formData.pageConfig.relatedWorkflowNode) {
              this.$message({
                message: '当页面配置流程图时，必须选择流程名称、流程节点',
                type: 'warning'
              })
            } else {
              let obj = {
                category: this.formData.pageConfig.relatedWorkflowName,
                jsonData: JSON.stringify(this.formData)
              }
              this.$emit('submitForm', obj)
            }
          }
        }
      } else {
        let obj = {
          category: this.formData.pageConfig.relatedWorkflowName,
          jsonData: JSON.stringify(this.formData)
        }
        this.$emit('submitForm', obj)
      }
    },
    // 预览
    previewEdit () {
      this.dialogFormVisible = true
    }
  },
  watch: {
    showEditContentDialog: {
      handler: function (val, oldVal) {
        this.judgeDialogOpen()
      },
      deep: true
    },
    selectFormItem: {
      handler: function (val, oldVal) {
        this.getAllSingleModel(this.formData.list)
      },
      deep: true
    }
  },
  components: {
    draggable,
    FormLayout,
    FormConfig,
    FormItemConfig,
    ShowFormLayout,
    ShowWorkflowFormLayout,
    PageEventsConfig,
    WorkflowConfig
  }
}
</script>
